<template>
	<view>
		<view class="padding-x-20 index_top">
			<view class="flex align-center justify-between padding-y-30">
				<view @click="jump('/pages/index/map')" class="flex align-center">
					<text class="fs-28 color-fff">{{city||'中原区'}}</text>
					<image src="../../static/img/down_f.png" style="width: 24rpx;height: 24rpx;"></image>
				</view>
				<view class="radius60 flex1 margin-x-24 padding-x-30 flex align-center"
					style="background: rgba(248, 248, 248, 0.18);">
					<image src="../../static/img/srh.png" style="width: 40rpx;height: 40rpx;"></image>
					<input @confirm="jump('/pages/canyin/index?keyword='+keyword)" v-model="keyword" type="text"
						class="fs-26 color-fff margin-left-20 ipt flex1" placeholder="输入的店名或所需内容">
				</view>
				<view class="flex align-center">
					<image @tap="scanZz()" src="../../static/img/sm.png"
						style="width: 46rpx;height: 46rpx;margin-right: 16rpx;"></image>
					<image @click="sjump('/pages/msg/index')" src="../../static/img/msg_f.png"
						style="width: 46rpx;height: 46rpx;"></image>
				</view>
			</view>

			<!-- 轮播图 -->
			<view class="index_banner padding-x-10">
				<swiper autoplay='true' class="swiper  radius10">
					<swiper-item v-for="(item,index) in banner" :key='index'>
						<view class="swiper-item">
							<image :src="item.pic" @tap="toPath(item.link_type,item.link)" mode="aspectFill"
								class="radius10"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图 end -->
		</view>

		<!-- 公告 -->
		<view class="padding-x-30 margin-top-24">
			<view class="radius60 flex align-center msgCon padding-x-20 padding-y-16">
				<image src="../../static/img/msg.png" style="width: 40rpx;height: 40rpx;"></image>
				<swiper autoplay='true' vertical style="height: 40rpx;"
					class="margin-x-20 fs-26 color-zhuse text-cut flex1">
					<swiper-item v-for="(item,index) in msg" :key='index'>
						<view class="swiper-item">
							<view @tap="jump(`/pages/msg/msgCon?id=${item.id}`)" class="w100 text-cut"
								style="height: 40rpx;line-height: 40rpx;">{{item.name}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 公告 end -->
		<!-- 分类 -->
		<view class="flex align-center justify-between flex-wrap margin-top-30">
			<view v-for="(item,index) in cate" :key='index' @click="toList(item.is_open,item.id)"
				class="w20 text-center margin-bottom-24">
				<image :src="item.pic" class="index_icon"></image>
				<view class="fs-24 color-000">{{item.name}}</view>
			</view>
			<!-- <view @click="jump('/pages/huisuo/index')" class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon2.png" class="index_icon"></image>
				<view class="fs-24 color-000">会所茶楼</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon3.png" class="index_icon"></image>
				<view class="fs-24 color-000">酒店宾馆</view>
			</view>
			<view @click="jump('/pages/qiuzhi/index')" class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon4.png" class="index_icon"></image>
				<view class="fs-24 color-000">招聘求职</view>
			</view>
			<view @click="jump('/pages/fangwu/index')"  class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon5.png" class="index_icon"></image>
				<view class="fs-24 color-000">房屋出租出售</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon6.png" class="index_icon"></image>
				<view class="fs-24 color-000">KTV娱乐</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon7.png" class="index_icon"></image>
				<view class="fs-24 color-000">按摩养生</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon8.png" class="index_icon"></image>
				<view class="fs-24 color-000">超市/购物</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon9.png" class="index_icon"></image>
				<view class="fs-24 color-000">二手车</view>
			</view>
			<view class="w20 text-center margin-bottom-24">
				<image src="../../static/img/index_icon10.png" class="index_icon"></image>
				<view class="fs-24 color-000">美容美体美发</view>
			</view> -->
		</view>
		<!-- 分类end -->

		<!-- 附近商家 -->
		<view class="margin-top-40 flex align-center justify-center">
			<view class="line1"></view>
			<view class="fs-32 color-333 margin-x-40">附近商家</view>
			<view class="line2"></view>
		</view>
		<view class="margin-top-30  relative">
			<view class="flex align-center margin-x-20">
				<view class="flex align-center margin-right-48" @click="changeType(1)">
					<text :class="sortType== 1 ?'color-zhuse':'color-999'" class="fs-28  margin-right-10"
						v-if="q.sort == 'sort'">推荐</text>
					<text :class="sortType== 1 ?'color-zhuse':'color-999'" class="fs-28  margin-right-10"
						v-if="q.sort == 'sale'">销量</text>
					<text :class="sortType== 1 ?'color-zhuse':'color-999'" class="fs-28  margin-right-10"
						v-if="q.sort == 'score'">评分</text>
					<text :class="sortType== 1 ?'color-zhuse':'color-999'" class="fs-28  margin-right-10"
						v-if="q.sort == 'distance'">距离</text>
					<image :src="sortType== 1 ? '../../static/img/down_on.png':'../../static/img/down.png'"
						style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<!-- <view @click="showCate()" class="flex align-center margin-right-48">
					<text :class="sortType== 2 ?'color-zhuse':'color-999'"  class="fs-28 color-999 margin-right-10">筛选</text>
					<image :src="sortType== 2 ? '../../static/img/filter_on.png':'../../static/img/filter.png'" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
			</view>

			<!-- 推荐、销量切换 -->
			<view class="absolute sortCon w100" v-if="flag" @tap.stop="flag=false">
				<view class="fs-26  padding-y-24 solid-bottom bg-fff  padding-x-24"
					:class="q.sort == 'sort' ? 'color-zhuse' : 'color-333'" @tap.stop="changeSort('sort')">推荐</view>
				<view class="fs-26 color-333 padding-y-24 solid-bottom bg-fff  padding-x-24"
					:class="q.sort == 'sale'  ? 'color-zhuse' : 'color-333'" @tap.stop="changeSort('sale')">销量</view>
				<view class="fs-26 color-333 padding-y-24 solid-bottom bg-fff  padding-x-24"
					:class="q.sort == 'score'  ? 'color-zhuse' : 'color-333'" @tap.stop="changeSort('score')">评分</view>
				<view class="fs-26 color-333 padding-y-24 solid-bottom bg-fff  padding-x-24"
					:class="q.sort == 'distance'  ? 'color-zhuse' : 'color-333'" @tap.stop="changeSort('distance')">距离
				</view>
			</view>

		</view>
		<view class="clearfix  margin-top-30 padding-x-10">
			<!-- 商家列表 -->
			<view v-for="(item,index) in list" :key='index' @click="jump('/pages/canyin/detail?id='+item.id)"
				class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" :src="item.cover" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">{{item.name}}</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">{{item.score}}分</text> |
								月售{{item.sale}}</view>
							<view class="color-fuse">{{parseFloat(item.distance).toFixed(2) || 0}}m</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 商家列表 end -->
		</view>
		<view class="nomore" :class="loadStatus" v-if="list.length"></view>
		<empty style="position: relative;margin-top: 200rpx;" v-if="list.length < 1"></empty>
		<!-- 附近商家end -->

		<!-- 筛选 -->
		<view v-if="filter"
			class="fixed filterCon bg-fff padding-x-20 padding-y-30 flex align-center justify-between flex-direction">
			<view class="flex align-center w100">
				<image @click="filter = false" src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;">
				</image>
				<view class="fs-30 color-333 flex1 text-center">筛选</view>
			</view>
			<view class="flex1 w100 margin-y-40">
				<view class="fs-28 color-333 ">类别</view>
				<view class="margin-top-24 flex align-center  flex-wrap">
					<view v-for="(item,index) in cate" :key='index' :class="q.classify_pid == item.id ? 'on':''"
						@click="changeCate(item.id)" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="flex align-center justify-center">
				<view @click="cancelCate()" class="fs-30 color-zhuse bg-fff text-center btn1">重置</view>
				<view @click="sureCate()" class="fs-30 color-fff bg-zhuse text-center btn2">筛选</view>
			</view>
		</view>
		<!-- 筛选end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortIndex: 0,
				flag: false,
				filter: false,
				city: "",
				msg: [],
				banner: [],
				classify: [],
				q: {
					longitude: "",
					latitude: "",
					sort: "sort",
					classify_pid: "",
					level: "",
					hours: "",
					diners: "",
					page: 1,
				},
				hasMore: true,
				loadStatus: '',
				list: [],
				cate: [],
				sortType: 1,
				keyword: ''
			}
		},
		onLoad() {

		},
		onShow() {
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: (res) => {
					console.log(res)
					this.city = res.address.district;
					this.q.longitude = res.longitude;
					this.q.latitude = res.latitude;
					uni.setStorageSync('longitude', res.longitude)
					uni.setStorageSync('latitude', res.latitude)
					uni.setStorageSync('city', res.address.city + ',' + res.address.district)
					this.init()
					this.list = [];
					this.q.page = 1;
					this.getList()
				},
				fail: (res) => {
					this.$msg('请授权获取定位信息')
					this.list = [];
					this.q.page = 1;
					this.getList()
				}
			});
			// #ifdef H5
			uni.setStorageSync('longitude', "104.198068")
			uni.setStorageSync('latitude', "35.861447")
			this.init()
			this.list = [];
			this.q.page = 1;
			this.getList()
			// #endif
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			init() {
				this.$api.index().then(res => {
					if (res.code == 1) {
						this.classify = res.data.classify;
						this.banner = res.data.banner;
						this.msg = res.data.announce;
					}
				})

				this.$api.classify({
					pid: 0
				}).then(res => {
					if (res.code == 1) {
						this.cate = res.data;
					}
				})
			},

			// 跳转二级
			toList(open, id) {
				if (open == 1) {
					if (id == 1 || id == 2 || id == 3) {
						uni.navigateTo({
							url: '/pages/canyin/index?id=' + id
						})
					}
					if (id == 4) {
						uni.navigateTo({
							url: '/pages/qiuzhi/index?id=' + id
						})
					}
					if (id == 5) {
						uni.navigateTo({
							url: '/pages/fangwu/index?id=' + id
						})
					}
				} else {
					this.$msg('暂未开通')
				}
			},

			getList() {
				this.isLoading = true;
				// console.log(this.q)
				this.$api.nearby_shop(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},

			showCate() {
				this.flag = false
				this.filter = true;
				this.sortType = 2;
			},
			changeType() {
				this.sortType = 1;
				this.flag = true
				this.filter = false;
			},

			changeCate(id) {
				this.q.classify_pid = id;
			},
			cancelCate() {
				this.filter = false;
				this.q.classify_pid = '';
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			sureCate() {
				this.filter = false;
				this.q.page = 1;
				this.list = [];
				this.getList();
			},

			changeSort(index) {
				this.q.sort = index;
				this.flag = false;
				this.q.page = 1;
				this.list = [];
				this.getList();
			},

			// 扫一扫
			scanZz() {
				// #ifdef APP-PLUS
				uni.scanCode({
					success: function(res) {
						// console.log('条码内容----' + res.result);
						var shop_id = res.result;
						if (shop_id) {
							uni.navigateTo({
								url: '/pages/my/zhuanzhang?shop_id=' + shop_id
							})
						}
					}
				});
				// #endif
				// #ifndef APP-PLUS
				this.$msg('请在App中使用该功能')
				// #endif
			},

			toPath(type, link) {
				if (type == 'url') {
					if (link) {
						// #ifdef H5
						window.location.href = link;
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(link);
						// #endif
					}
				}
				if (type == 'shop') {
					uni.navigateTo({
						url: '/pages/canyin/detail?id=' + link
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index_top {
		background: linear-gradient(to bottom, #FF7B00, #FCBA72, #FFFFFF);
		/* #ifdef APP-PLUS */
		padding-top: 50rpx;
		/* #endif */
	}

	.uni-input-placeholder {
		color: #fff;
	}

	.ipt {
		height: 70rpx;
	}

	.index_banner {
		.swiper {
			height: 300rpx !important;
		}

		image {
			width: 100%;
			height: 300rpx !important;
		}
	}

	.msgCon {
		background: rgba(255, 147, 46, 0.05);
		border: 1rpx solid #FF932E;
	}

	.index_icon {
		width: 100rpx;
		height: 100rpx;
	}

	.line1 {
		width: 84rpx;
		height: 4rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, #FFFFFF, #FEC472);
	}

	.line2 {
		width: 84rpx;
		height: 4rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, #FEC472, #FFFFFF);
	}

	.goods_item {
		border-radius: 8rpx;
		box-shadow: 0 0 8rpx 8rpx #F5F5F5;
	}

	.goods_img {
		width: 100%;
		height: 338rpx;
		border-radius: 10rpx;
	}

	.goods_name {
		height: 76rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 38rpx;
	}

	.sortCon {
		top: 56rpx;
		background: rgba(0, 0, 0, 0.4);
		height: 100vh;
		z-index: 9;
	}

	.filterCon {
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		/* #ifdef APP-PLUS */
		padding-top: 88rpx;
		/* #endif */
	}

	.nav_item {
		background: rgba(153, 153, 153, 0.1);
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border-radius: 60rpx;
	}

	.nav_item.on {
		background: rgba(255, 147, 46, 0.08);
		color: #FF932E;
		border: 1rpx solid #FF932E;
	}

	.btn1 {
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		border: 1rpx solid #FF932E;
	}

	.btn2 {
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		border: 1rpx solid #FF932E;
	}
</style>
